How to Create Magento2 Custom Theme?

Theme is a major component of Magento 2. As, it gives a consistent feel as well as look to your whole website. To add a “WOW Factor” to your site, we have come up with a new amendment that helps you create a custom theme on your Magento 2!

Below we have showcased a complete step-to-step tutorial with ‘How to Create Magento2 Custom Theme’. So now read and invent your brand new Magento 2 theme in a matter of few clicks.

Step 1: To create a custom theme in magento2,
First, you have to go: <your Magento 2 root directory>/app/design/frontend.

• Under the front-end directory, create a new directory as per your theme vendor name: /app/design/frontend/Envision (For example: I choose Envision for my theme vendor name)
• Under your theme vendor directory, create a directory for your Magento 2 theme: /app/design/frontend/Envision/e2-theme.

After that, you have to reveal your Magento 2 theme so that Magento e-commerce system knows it exists in Magento. Plus, allow you to set your theme as an active theme in the backend of your Magento 2 stores.

Step 2: Declare your theme in Magento 2 Now you need to declare your theme in Magento2 by creating a theme.xml file under app/design/frontend/Envision/e2-theme/theme.xml and use the code below:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">

<title>e2-theme</title>

<parent>Magento/Luma</parent>

<media>

<preview_image>media/e2-theme-image.jpg</preview_image>

</media>

</theme>

Step 3: Make a Composer package

You need to add a composer.json file in a directory of your Magento 2 theme: app/design/frontend/Envision/e2-theme/composer.json and use the following code to register the package on a packaging server:

{

"name": "Envision/e2-theme",

"description": "N/A",

"require": {

"php": "~5.5.0|~5.6.0|~7.0.0",

"Envision/e2-theme": "100.0.*",

"magento/framework": "100.0.*"

},

"type": "magento2-theme",

"version": "100.0.1",

"license": [

"OSL-3.0",

"AFL-3.0"

],

"autoload": {

"files": [

"registration.php"

]

}

}

Step 4: Add “registration.php” File

To register your Magento 2 theme in the Magento system, you have to build registration.php file in a directory of your Magento 2 theme: app/design/frontend/Envision/e2-theme/registration.php and use the following code in your registration.php:

<?php

/**

* Copyright © 2015 Magento. All rights reserved.

* See COPYING.txt for license details.

*/

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::THEME,

'frontend/Envision/e2-theme',

__DIR__

);

After completing theme registration, you need to go to Magento 2 backend, then go to Content > Design > Themes so that you make certain that your Magento 2 theme appears in this list.

If you have any query, please feel free to contact us at sales@envisionecommerce.com or if you have any additional method or tip on this, please let us know by leaving your comment in the comment section below.